<style scoped>
.split {
    height: calc(100vh - 140px);
    background: #ffffff;
    border: 1px solid #dcdee2;
}

.split-pane {
    padding: 10px;
}
</style>
<style>
.ivu-table .demo-table-error-row td {
    background-color: #ea504c;
    color: #fff;
}

.ivu-table .demo-table-error-advent-row td {
    background-color: #ff9900;
    color: #fff;
}

/deep/.ivu-table-header thead tr th {
    background: #2db7f5 !important;
}

/deep/.ivu-table-fixed-header thead tr th {
    background: #2db7f5 !important;
}
</style>
<template>
    <div class="split">

        <div class="split-pane">
            <Alert type="warning">提示：药品标为<span style="color: #e9504c; font-weight: bold;">红色</span>的为已经过期的药品，<span
                    style="color: #ff9900; font-weight: bold;">黄色</span>的为临期一个月的药品，其余为即将在六个月内（180天）内到期的产品！
            </Alert>
            <Card style="margin-bottom: 10px">
                <Form inline class="form-search">
                    <FormItem>
                        <Input v-model="keyword" placeholder="名称" style="width: 200px" />
                    </FormItem>
                    <FormItem>
                        <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="开始日期"
                            :clearable="true" v-model="sdate"></DatePicker>
                    </FormItem>
                    <FormItem>
                        <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="结束日期"
                            :clearable="true" v-model="edate"></DatePicker>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="page = 1; SearchProduct();" icon="md-search">查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="ExportExpiredProduct();" icon="md-search">导出</Button>
                    </FormItem>
                </Form>
            </Card>
            <Table ref="table" :row-class-name="rowClassName" style="margin-bottom: 10px" border :loading="loadingTable"
                :columns="tableTitle" :data="tableData" :height="tableHeight"></Table>

            <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100]"
                @on-change="(s) => { page = s; SearchProduct(); }"
                @on-page-size-change="(p) => { size = p; page = 1; SearchProduct(); }" show-total show-sizer />
        </div>

    </div>
</template>

<script>
import { GetTreeProductType, SearchExpiredProduct, ExportExpiredProduct } from "@/api/product";
// import the component
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { InitProductTypeTree } from "@/libs/tools";
export default {
    name: "product",
    components: {
        Treeselect,
    },
    data() {
        return {
            split1: 0.15,
            total: 0,
            page: 1,
            size: 10,
            tableHeight: 450,
            keyword: "",
            typeid: 0,
            sdate: null,
            edate: null,
            loadingTable: false,
            typeList: [],
            treeData: [],
            selectTreeData: [],
            tableTitle: [
                {
                    type: "index",
                    title: "序号",
                    align: "center",
                    width: 60,
                    // render: (h, params) => {
                    //     return h("span", params.index + (this.page - 1) * this.size + 1);
                    // },
                    indexMethod: (params) => {
                        return params._index + (this.page - 1) * this.size + 1;
                    }
                },
                {
                    key: "Name",
                    title: "名称",
                    minWidth: 150,
                    resizable: true,
                    align: "left",
                },
                {
                    key: "ExpirationDate",
                    title: "有效期至",
                    width: 120,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.ExpirationDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: "Num",
                    title: "数量",
                    width: 100,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "Specification",
                    title: "规格",
                    minWidth: 100,
                    resizable: true,
                    align: "left",
                },
                {
                    key: "Unit",
                    title: "单位",
                    minWidth: 50,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "Manufacturer",
                    title: "生产厂家",
                    minWidth: 150,
                    resizable: true,
                    align: "left",
                },
                {
                    key: "Formulations",
                    title: "剂型",
                    minWidth: 100,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "Price",
                    title: "价格",
                    width: 100,
                    resizable: true,
                    align: "center",
                },
            ],
            tableData: [],
        };
    },
    computed: {},
    methods: {
        changeTree(a, b) {
            this.typeid = b.id;
            this.SearchProduct();
        },
        SearchProduct() {
            let vm = this;
            if (vm.sdate != null && vm.sdate != '') {
                if (vm.sdate === 'object') {
                    vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
                }
            }
            else {
                vm.sdate = null;
            }
            if (vm.edate != null && vm.edate != '') {
                if (vm.edate === 'object') {
                    vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
                }
            } else {
                vm.edate = null;
            }
            vm.loadingTable = true;
            var reqData = {
                keyword: vm.keyword,
                typeid: vm.typeid,
                page: vm.page,
                size: vm.size,
                sdate: vm.sdate,
                edate: vm.edate,
            };
            SearchExpiredProduct(reqData).then((res) => {
                vm.loadingTable = false;
                var data = res.data;
                if (data.StatusCode == 200) {
                    vm.tableData = data.Data.Items;
                    vm.total = data.Data.TotalCount;
                } else {
                    vm.$Notice.error({
                        title: data.Errors,
                    });
                }
            });
        },
        ExportExpiredProduct() {
            let vm = this
            if (vm.sdate != null && vm.sdate != '') {
                if (vm.sdate === 'object') {
                    vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
                }
            }
            else {
                vm.sdate = null;
            }
            if (vm.edate != null && vm.edate != '') {
                if (vm.edate === 'object') {
                    vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
                }
            } else {
                vm.edate = null;
            }
            var reqData = {
                keyword: vm.keyword,
                typeid: vm.typeid,
                sdate: vm.sdate,
                edate: vm.edate,
            }
            ExportExpiredProduct(reqData).then((res) => {
                this.downloadfile(res)
            }).catch((err) => {
                vm.$Message.error({ title: '导出错误', content: err })
            })
        },
        downloadfile(res) {
            var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
            var contentDisposition = res.headers['content-disposition']
            var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
            var filename = "临期药品.xlsx"
            if (contentDisposition != undefined) {
                var result = patt.exec(contentDisposition)
                filename = result[1]
            }
            var downloadElement = document.createElement('a')
            var href = window.URL.createObjectURL(blob) // 创建下载的链接
            var reg = /^["](.*)["]$/g
            downloadElement.style.display = 'none'
            downloadElement.href = href
            downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href)
        },
        rowClassName(row, index) {
            if (row.IsExprired) {
                return 'demo-table-error-row';
            }
            else if (row.IsAdvent) {
                return 'demo-table-error-advent-row';
            }
            return '';
        },
        GetTreeProductType() {
            let vm = this;
            GetTreeProductType(0).then((res) => {
                const data = res.data;
                if (data.StatusCode == 200) {
                    this.selectTreeData = InitProductTypeTree(data.Data);
                    this.treeData = [
                        {
                            id: 0,
                            label: "全部",
                            title: "全部",
                            value: 0,
                            expand: true,
                            children: this.selectTreeData,
                        },
                    ];
                } else {
                    vm.$Message.error({ title: "提示", content: data.Errors });
                }
            });
        }
    },

    mounted() {
        this.tableHeight = window.innerHeight - 334;
        this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日');
        this.edate = this.dayjs().format('YYYY年MM月DD日');
        //this.GetTreeProductType();
        this.SearchProduct();
    },
};
</script>
